<template>
  <div
    v-infinite-scroll="loadData"
    infinite-scroll-distance="2"
    :infinite-scroll-immediate="false"
    :infinite-scroll-disabled="disabled"
    class="artistlist-container scroll-container"
    style="overflow: auto">
    <h4 class="title">歌手地区</h4>
    <div class="type">
      <button
        @click="changeRank(index)"
        v-for="(item, index) in type"
        :key="item"
        :class="{
          'is-active': index == active,
        }">
        {{ item }}
      </button>
    </div>
    <h4 class="title">歌手榜</h4>
    <div class="ranks">
      <Singer :singer-list="currentList" />
      <div
        v-show="isLoading"
        v-loading="isLoading"
        :element-loading-background="bg"
        element-loading-text="加载中，请勿继续滚动！"
        :element-loading-spinner="Svg"
        class="tip"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, Ref, inject } from 'vue';
import { Artist, Svg } from '../model';
import { getArtistList } from '../api/api';
import { elMessage, getTheme } from '../utils/util';
import { elMessageType } from '../model/enum';
import Singer from '../components/Singer.vue';

//配置主题
const color = getTheme().get('fontColor');
const colorBlack = getTheme().get('fontBlack');
const boxShadow = getTheme().get('shadow');
const bg = getTheme().get('background');
//歌手榜单
const artistlist = reactive<Artist[][]>([]);

//当前展示的数据
let currentList = reactive<Artist[]>([]);
//歌手榜类型
const type = reactive<string[]>(['内地', '欧美', '韩国', '日本']);

//当前活跃的榜单
const active = ref<number>(0);
//初始展示歌手的数量
const dataNum = ref<number>(18);
//是否禁用滚动加载
const disabled = ref<boolean>(false);
//加载动画
const isLoading = ref<boolean>(false);

//页面第一次加载的动画
const first = inject<Ref<boolean>>('firstLoading');
first!.value = true;
// 滚动加载数据
const loadData = () => {
  if (dataNum.value < artistlist[active.value].length) {
    isLoading.value = true;
    disabled.value = true;
    setTimeout(() => {
      dataNum.value += 6;
      currentList.push(
        ...artistlist[active.value].slice(currentList.length, dataNum.value)
      );
      isLoading.value = false;
      disabled.value = false;
    }, 1000);
  } else {
    isLoading.value = true;
    disabled.value = true;
    setTimeout(() => {
      isLoading.value = false;
      dataNum.value = artistlist[active.value].length;
      currentList.push(
        ...artistlist[active.value].slice(currentList.length, dataNum.value)
      );
      elMessage(elMessageType.SUCCESS, '已经到底啦！');
    }, 1000);
  }
};

//修改分类排行榜
const changeRank = (index: number) => {
  active.value = index;
  dataNum.value = 18;
  currentList = reactive<Artist[]>([]);
  currentList.push(...artistlist[active.value].slice(0, dataNum.value));
  disabled.value = false;
};

//请求数据
Promise.all([
  getArtistList(1),
  getArtistList(2),
  getArtistList(3),
  getArtistList(4),
])
  .then((result: any) => {
    result.forEach((response: any) => {
      const {
        list: { artists },
      } = response;
      const singers = reactive<Artist[]>([]);
      artists.forEach((item: any) => {
        const { name, id, picUrl, score } = item;
        singers.push({
          name: name,
          id: id,
          avatar: picUrl,
          score: score,
        });
      });
      artistlist.push(singers);
    });
    //加载初始数据
    currentList.push(...artistlist[active.value].slice(0, dataNum.value));
    first!.value = false;
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });
</script>

<style lang="less" scoped>
@font-color: v-bind(color);
@font-color-light-black: v-bind(colorBlack);
@shadow: v-bind(boxShadow);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;

.artistlist-container {
  .tip {
    width: 81vw;
    height: 50px;
    margin: 10px 0;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: @font-color;
  }

  .is-active {
    background-color: #1ed2a9 !important;
    color: #ffffff !important;
  }

  .type {
    width: 81vw;
    margin: 15px 0;
    padding-left: 8.5px;
    button {
      margin-right: 10px;
      font-size: 14px;
      letter-spacing: 1px;
      outline: none;
      border: none;
      width: 90px;
      height: 35px;
      border-radius: 17.5px;
      box-shadow: @shadow;
      &:hover {
        color: @font-color-green;
        background: rgba(220, 220, 220, 0.6);
      }
    }
  }

  .title {
    font-size: 20px;
    font-weight: 520;
    width: 81vw;
    color: @font-color;
    padding-left: 8.5px;
  }
  .ranks {
    display: flex;
    width: 81vw;
    flex-wrap: wrap;
  }
}
</style>
